@import '~@icedesign/skin/variables.scss';
/**
 * 自定义侧边导航栏风格覆盖默认的样式
 */
$ice-aside-menu-bg: transparent !default;
$ice-aside-text-color: $color-text1-3 !default;
$ice-aside-sub-text-color: $color-text1-3 !default;
$ice-aside-text-hover-color: $color-white !default;
$ice-aside-menu-item-selected-gradient-left-bg: $color-brand1-9 !default;
$ice-aside-menu-item-selected-gradient-right-bg: $color-brand1-5 !default;
$ice-aside-menu-item-selected-text-color: $color-white !default;
$ice-aside-menu-submenu-item-hover-bg: transparent !default;
$ice-aside-menu-submenu-vertical-bg: $color-white !default;

.docs-aside-content {
  .ice-menu {
    background: $ice-aside-menu-bg;
  }

  .ice-menu.ice-menu-root.ice-menu-inline
    > .ice-menu-submenu
    > .ice-menu-submenu-title,
  .ice-menu.ice-menu-root.ice-menu-inline > .ice-menu-item {
    margin-bottom: 1px;
    color: $ice-aside-text-color;
    font-weight: bold;
  }

  .ice-menu.ice-menu-root .ice-menu-inline > .ice-menu-item {
    margin-bottom: 1px;
    color: $ice-aside-sub-text-color;
  }

  .ice-menu .ice-menu-item:hover,
  .ice-menu.ice-menu-horizontal > .ice-menu-item:hover,
  .ice-menu.ice-menu-root > .ice-menu-item:hover {
    color: #fff;
    border-radius: 6px;
    background-image: linear-gradient(
      90deg,
      $ice-aside-menu-item-selected-gradient-left-bg 0%,
      $ice-aside-menu-item-selected-gradient-right-bg 100%
    );
  }

  .ice-menu .ice-menu-item > a:hover,
  .ice-menu.ice-menu-horizontal > .ice-menu-item:hover,
  .ice-menu.ice-menu-root > .ice-menu-item > a:hover {
    color: $ice-aside-text-hover-color;
  }

  .ice-menu:not(.ice-menu-horizontal) .ice-menu-item-selected {
    border-radius: 6px;
    background-image: linear-gradient(
      90deg,
      $ice-aside-menu-item-selected-gradient-left-bg 0%,
      $ice-aside-menu-item-selected-gradient-right-bg 100%
    );
  }

  .ice-menu .ice-menu-submenu-vertical > .ice-menu:after {
    background: $ice-aside-menu-submenu-vertical-bg;
  }

  .ice-menu:not(.ice-menu-horizontal) .ice-menu-item-selected:before,
  .ice-menu-sub .ice-menu-item:hover:before {
    width: 0;
  }

  .ice-menu.ice-menu-root .ice-menu-item-selected > a {
    color: $ice-aside-menu-item-selected-text-color;
  }

  .ice-menu-item:hover {
    background: $ice-aside-menu-submenu-item-hover-bg;
    color: $ice-aside-text-hover-color;
  }
}
